<template>
	<view class="container">
		<!-- <image class="bg-top" src="../../static/ssmall/bg.png"> -->

		<!-- 导航栏 -->
		<view class="mp-nav-bar-bg" :style="{height:menuButtonInfo.bottom + 10 + 'px',backgroundColor:bgColor}">
			<view class="mp-nav-bar" :style="{top:menuButtonInfo.top + 'px'}">
				<image src="../../static/ssmall/logo.png" class="nav-logo"></image>
				<view class="search-bar" @click="clickSearch">
					<uni-icons type="search" color="#CCC"></uni-icons>
					<text class="search-bar-title">搜索商品、店铺</text>
				</view>
			</view>
		</view>
		
		<!-- </image> -->

		<!-- 轮播图 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing" :style="{height:menuButtonInfo.bottom + 15 + 'px'}"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper class="carousel" circular @change="swiperChange" autoplay>
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.src" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent + 1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>

		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" @click="clickMenu('每日上新')">
				<!-- <image src="/static/mixmall/temp/c3.png"></image> -->
				<image src="/static/ssmall/shangxin.png"></image>
				<text>每日上新</text>
			</view>
			<view class="cate-item" @click="clickMenu('种草好物')">
				<!-- <image src="/static/mixmall/temp/c5.png"></image> -->
				<image src="/static/ssmall/zhongcao.png"></image>
				<text>种草好物</text>
			</view>
			<view class="cate-item" @click="clickMenu('拾尚拼购')">
				<!-- <image src="/static/mixmall/temp/c6.png"></image> -->
				<image src="/static/ssmall/pingou.png"></image>
				<text>拾尚拼购</text>
			</view>
			<view class="cate-item" @click="clickMenu('拾尚拍卖')">
				<!-- <image src="/static/mixmall/temp/c7.png"></image> -->
				<image src="/static/ssmall/lingquna.png"></image>
				<text>拾尚拍卖</text>
			</view>
			<view class="cate-item" @click="clickMenu('拾尚自营')">
				<!-- <image src="/static/mixmall/temp/c8.png"></image> -->
				<image src="/static/ssmall/ziying.png"></image>
				<text>拾尚自营</text>
			</view>
		</view>

		<!-- 秒杀 -->
		<view class="seckill-section">
			<view class="seckill-section-head">
				<text class="head-title">限时秒杀</text>
				<view class="countdown-time">
					<view class="time">10点场</view>
					<view class="count-down">
						<uni-countdown :show-day="false" :hour="23" :minute="59" :second="59" backgroundColor="#00"
							color="#EF2B2C" splitorColor="#EF2B2C" />
					</view>
				</view>
				<text class="head-more">更多></text>
			</view>
			<scroll-view class="goods-list" scroll-x>
				<view class="goods-list-container">
					<!-- <view class="goods-list-cell" v-for="item in seckillList" @click="navToDetailPage(item.goodId)"> -->
					<view class="goods-list-cell" v-for="item in seckillList">
						<image class="goods-image" :src="item.image"></image>
						<text class="goods-name">{{item.title}}</text>
						<text class="goods-price">¥{{item.price}}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 广告 -->
		<view class="ad-seciton">
			<image src="../../static/ssmall/xinren_banner@2x.png"></image>
		</view>

		<!-- 商品橱窗 -->
		<view class="window-section">
			<view class="window1">
				<view class="left-panel">
					<!-- <image src="/static/ssmall/01_bg%20@2x.png"></image> -->
					<image :src="sixCard[0].link_image" @click="navToDetailPage(sixCard[0].linkId)"></image>
				</view>
				<view class="right-panel">
				<!-- 	<image src="/static/ssmall/03_bg@2x.png"></image>
					<image src="/static/ssmall/02_bg@2x.png"></image> -->
					<image :src="sixCard[1].link_image" @click="navToDetailPage(sixCard[1].linkId)"></image>
					<image class="imageB" :src="sixCard[2].link_image" @click="navToDetailPage(sixCard[2].linkId)"></image>
				</view>
			</view>
			<view class="window2">
				<view class="left-panel">
					<!-- <image src="/static/ssmall/04_bg@2x.png"></image> -->
					<image :src="sixCard[3].link_image" @click="navToDetailPage(sixCard[3].linkId)"></image>
				</view>
				<view class="right-panel">
				<!-- 	<image src="/static/ssmall/05_bg@2x.png"></image>
					<image src="/static/ssmall/06_bg@2x.png"></image> -->
					<image :src="sixCard[4].link_image" @click="navToDetailPage(sixCard[4].linkId)"></image>
					<image class="imageB" :src="sixCard[5].link_image" @click="navToDetailPage(sixCard[5].linkId)"></image>
				</view>
			</view>
		</view>

		<!-- 广告 -->
		<view class="ad-seciton">
			<image src="../../static/ssmall/0yuanling_banner@3x.png"></image>
		</view>

		<!-- 拾尚优选 -->
		<view class="section-head">
			<text class="title">拾尚优选</text>
			<text class="more">更多></text>
		</view>
		<view class="goods-section">
			<view class="section-list-cell" v-for="(item,index) in goodsList" :key="index"
				@click="navToDetailPage(item.goodId)">
				<view class="cell-container">
					<image class="image-wrapper" :src="item.goodImage"></image>
					<text class="title">{{item.goodsName}}</text>
					<view class="selfsupport" v-if="item.selfSupport">自营</view>
					<text class="price">¥{{item.currentPrice}}</text>
				</view>
			</view>
		</view>
		<view class="uni-data-loading">
			<uni-load-more :status="status" iconType="auto" :iconSize="16" :content-text="contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>

    import {mapState} from 'vuex'

	export default {
		data() {
			return {
				homeDto:{},
				sixCard:[],
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				titleNViewBackground: '',
				seckillList: [],
				goodsList: [],
				pageIndex: '1',
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				menuButtonInfo:{},
				bgColor:''
			}
		},
		computed:{
			...mapState(['hasLogin'])
		},
		onLoad() {
			this.loadData();
			this.getHomeInfo();
			this.getGoodsList();
			
			//获取小程序胶囊菜单坐标
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		onPullDownRefresh() {
			this.pageIndex = 1;
			
			this.loadData();
			this.getHomeInfo();
			this.getGoodsList();
		},
		onPageScroll(e) {
			
			let navHeight = this.menuButtonInfo.bottom + 10;
			let alpha = 0.0
			if(e.scrollTop <= 0) {
				alpha = 0.0;
			} else {
				alpha = 1 - ((navHeight - e.scrollTop)/navHeight);
			}

			this.bgColor = 'rgba(255,255,255,' + alpha +')';  
		},
		onReachBottom() {
			this.status = 'more';
			this.pageIndex++;
			this.getGoodsList();
		},
		methods: {
			async loadData() {
				let carouselList = await this.$api.json('carouselList');
				this.titleNViewBackground = carouselList[0].background;
				this.swiperLength = carouselList.length;
				this.carouselList = carouselList;

				let seckillList = await this.$api.json('goodsList');
				this.seckillList = seckillList || [];

			},
			clickSearch() {
				this.$api.msg('点击了搜索');
			},
			clickMenu(menu) {
				this.$api.msg(`点击了${menu}`);
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			async getHomeInfo() {
				let data = {
					"env": "1",
					"templateName": "fiveHomePage"
				}
				
				let res = await this.helper.requestAPI(this.api.home,data);
				let cartSize = res.body.cartSize;
				
				this.homeDto = res.body.newHomeDto;
				this.sixCard = this.homeDto.sixCardDto;
				
				//设置购物车数量
				if(this.hasLogin) {
					uni.setTabBarBadge({
						index:2,
						text:cartSize.toString()
					})
				}
			},
			async getGoodsList() {

				this.status = 'loading';
				
				let res = await this.helper.requestAPI(this.api.goodslist,null,this.pageIndex);
				let list = res.body.guessLikeGoods;
				this.goodsList = this.pageIndex == 1 ? list : this.goodsList.concat(list);
				this.loading = false;
			},
			navToDetailPage(goodsId) {
				// this.$api.msg('商品id:' + goodsId);

				uni.navigateTo({
					url: '/pages/product/product?id=' + goodsId
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	// .container {}

	// .status_bar {
	//       height: var(--status-bar-height);
	//       width: 100%;
	//   }

	// page {
	// 	.cate-section {
	// 		position: relative;
	// 		z-index: 5;
	// 		border-radius: 16rpx 16rpx 0 0;
	// 		margin-top: -20rpx;
	// 	}

	// 	.carousel-section {
	// 		padding: 0;

	// 		.titleNview-placing {
	// 			padding-top: 0;
	// 			height: 0;
	// 		}

	// 		.carousel {
	// 			.carousel-item {
	// 				padding: 0;
	// 			}
	// 		}

	// 		.swiper-dots {
	// 			left: 45rpx;
	// 			bottom: 40rpx;
	// 		}
	// 	}
	// }

	.bg-top {
		width: 100%;
		height: 428rpx;
	}
	
	.mp-nav-bar-bg{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
	}

	/*导航栏*/
	.mp-nav-bar {
		display: flex;
		position: relative;
		left: 20rpx;
		// top: var(--status-bar-height);
		// width: 100%; 设置宽度出现横向滚动条

		.nav-logo {
			width: 70rpx;
			height: 70rpx;
		}

		.search-bar {
			display: flex;
			align-items: center;
			background-color: $page-color-base;
			width: 430rpx;
			padding-left: 20rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 32rpx;
			margin-left: 20rpx;

			.search-bar-title {
				color: #CCC;
				font-size: 26rpx;
				line-height: 26rpx;
				margin-left: 12rpx;
			}
		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;

		.titleNview-placing {
			// height: var(--status-bar-height);
			// padding-top: 44px;
			// box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426rpx;
			transition: .4s;
		}

		.carousel {
			width: 100%;
			height: 350rpx;

			.carousel-item {
				width: 100%;
				height: 100%;
				padding: 0 23rpx;
				overflow: hidden;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.swiper-dots {
			display: flex;
			position: absolute;
			right: 60rpx;
			bottom: 15rpx;
			width: 72rpx;
			height: 36rpx;
			background-image: url();
			background-size: 100% 100%;

			.num {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 36rpx;
			}

			.sign {
				position: absolute;
				top: 0;
				left: 50%;
				line-height: 36rpx;
				font-size: 12rpx;
				color: #fff;
				transform: translateX(-50%);
			}
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30rpx 22rpx;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// font-size: $font-sm + 2rpx;
			// color: $font-color-dark;
			font-size: 26rpx;
			color: #333;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 14rpx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
		}
	}

	/* 秒杀 */
	.seckill-section {
		display: flex;
		flex-direction: column;
		background-color: white;
		margin: 10rpx 23rpx;
		padding: 28rpx 23rpx 10rpx 23rpx;
		height: 436rpx;
		border-radius: 20rpx;

		.seckill-section-head {
			display: inherit;
			align-items: center;
		}

		.head-title {
			font-size: 32rpx;
			color: #282828;
		}

		.countdown-time {
			display: inherit;
			border-style: solid;
			border-width: 1rpx;
			border-color: #EF2B2C;
			border-radius: 20rpx;
			height: 40rpx;
			background-color: white;
			align-items: center;
			margin-left: 20rpx;

			.time {
				display: inherit;
				align-items: center;
				background-color: #EF2B2C;
				color: white;
				font-size: 20rpx;
				padding: 0 14rpx;
				border-radius: 20rpx;
				height: 40rpx;
			}

			.count-down {
				padding: 0 10rpx;
				width: 160rpx;
			}
		}

		.head-more {
			position: absolute;
			right: 43rpx;
			color: #868686;
			font-size: 24rpx;
		}

		.goods-list {
			// white-space: nowrap;
			margin-top: 32rpx;

			.goods-list-container {
				display: flex;
				align-items: flex-start;
			}

			.goods-list-cell {
				display: flex;
				flex-direction: column;
				margin: 0 10rpx;

				.goods-image {
					width: 212rpx;
					height: 212rpx;
					border-radius: 10rpx;
				}

				.goods-name {
					font-size: 24rpx;
					line-height: 24rpx;
					margin-top: 22rpx;
					max-width: 212rpx;

					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: clip;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.goods-price {
					color: #E60012;
					font-size: 30rpx;
					margin-top: 17rpx;
				}
			}
		}
	}

	/* 广告 */
	.ad-seciton {
		margin: 22rpx 23rpx 0;
		height: 228rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* 商品橱窗 */
	.window-section {
		display: flex;
		flex-direction: column;
		margin: 22rpx 23rpx 0;

		.window1 {
			display: flex;
		}

		.window2 {
			display: flex;
			margin-top: 15rpx;
		}

		.left-panel {
			width: 345rpx;
			height: 396rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 6rpx;
			}
		}

		.right-panel {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 345rpx;
			height: 396rpx;
			margin-left: 15rpx;

			image {
				width: 100%;
				height: 198rpx;
				border-radius: 6rpx;
			}
			
			.imageB {
				margin-top: 15rpx;
			}
		}
	}

	/*拾尚优选*/
	.section-head {
		display: flex;
		justify-content: space-between;
		padding: 35rpx 23rpx;

		.title {
			color: #282828;
			font-size: 32rpx;
		}

		.more {
			color: #868686;
			font-size: 24rpx;
			margin-right: 20rpx;
		}
	}

	.goods-section {
		display: flex;
		flex-wrap: wrap;
		margin: 0 20rpx;

		.section-list-cell {
			display: inherit;
			width: 48%;
			height: 508rpx;

			&:nth-child(2n+1) {
				margin-right: 3%;
			}

			.cell-container {
				display: inherit;
				position: relative;
				flex-direction: column;
				background: white;
				width: 100%;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.image-wrapper {
				width: 100%;
				height: 319rpx;
				overflow: hidden;
				border-radius: 10rpx;
			}

			.title {
				color: #333333;
				font-size: 26rpx;
				line-height: 30rpx;
				margin: 17rpx 18rpx 0;

				overflow: hidden;
				-webkit-line-clamp: 1;
				text-overflow: clip;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.selfsupport {
				color: white;
				background: #EF2B2C;
				font-size: 20rpx;
				text-align: center;
				margin: 11rpx 0 0 18rpx;
				width: 71rpx;
				height: 33rpx;
			}

			.price {
				position: absolute;
				left: 16rpx;
				bottom: 16rpx;
				color: #EF2B2C;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}

	.uni-data-loading {
		display: flex;
		justify-content: center;
		width: 100%;
		color: #999;
	}
</style>
